iT邦幫忙

2023 iThome 鐵人賽

DAY 18
0
自我挑戰組

React Clean Code And Unit Tests - 利用測試寫出人類看得懂的React程式系列 第 18

Day 18 - 那些可以試著用在專案的 Functional Programing 觀念 part 1

  • 分享至 

  • xImage
  •  

這兩天來看看 function programing 的哪些概念可以幫助我們寫出 clean code 吧 !

First-class Function 一級函式

MDN定義
指的是 可以將 function 作為參數、或者返回一個 function 作為結果的 function。

function firstClassFunction(fn, data) { 
   return fn(data);
}

備註: 當一個函式可以回傳一個函式時,稱之為高階函式 (Higher-Order Function )。

推薦他的理由

  • 回調函式 (callback function) 包裝:可以將回調函式作為參數傳遞給另一個函式,實現自定義的行為,且更易讀。
  • 抽象操作:可以將高階函式作為封裝操作的一層抽象,例如實現過濾、轉換等。
  • 函式組合:可以組合多個函式,以創建新的函式。

Declarative 宣告式函式

宣告式函式只需要我們告訴他需要「什麼」,由他來決定該「如何」實現 (What to do),主要著重在結果,通過宣告式函式 ,可以讓你的程式碼更簡潔好懂,而且不容易出現 side effect。

而命令式涵式 ( Imperative ) 會更著重在過程 (How to do)

舉例來說


// Imperative (How to do)

const doubleMap = numbers => {
  const doubled = [];
  for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
  }
  return doubled;
};

console.log(doubleMap([2, 3, 4])); // [4, 6, 8]
// Declarative (What to do)

const doubleMap = numbers => numbers.map(n => n * 2);

console.log(doubleMap([2, 3, 4])); // [4, 6, 8]

利用 Declarative 整個程式碼是不是變得比較好讀拉~


上一篇
Day 17 - TDD part 2 : Functional Programing
下一篇
Day 19 - 可以試著用在專案的 Functional Programing 觀念 part 2
系列文
React Clean Code And Unit Tests - 利用測試寫出人類看得懂的React程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言